<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>填写个人信息</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/personmsg.css"/>
	</head>
	<body>
		
		<div class="web">
			<!--提交失败-->
			<div class="pop-up-windows1">
				<div class="window-tc">
					<div class="closeBtn1"><img src="img/window-btn.png" alt="关闭" /></div>
					<div class="tc-msg">提交失败！</div>	
				</div>
			</div>
			<!--真实姓名包含非法字符-->
			<div class="pop-up-windows6">
				<div class="window-tc">
					<div class="closeBtn6"><img src="img/window-btn.png" alt="关闭" /></div>
					<div class="tc-msg">真实姓名包含非法字符！</div>	
				</div>
			</div>
			<!--联系电话格式错误-->
			<div class="pop-up-windows3">
				<div class="window-tc">
					<div class="closeBtn3"><img src="img/window-btn.png" alt="关闭" /></div>
					<div class="tc-msg">联系电话不存在！</div>	
				</div>
			</div>
			<!--只限广东省和海南省参与哦-->
			<div class="pop-up-windows4">
				<div class="window-tc">
					<div class="closeBtn4"><img src="img/window-btn.png" alt="关闭" /></div>
					<div class="tc-msg">只限广东省和海南省参与哦！</div>	
				</div>
			</div>
			<!--日期范围已超过-->
			<div class="pop-up-windows5">
				<div class="window-tc">
					<div class="closeBtn5"><img src="img/window-btn.png" alt="关闭" /></div>
					<div class="tc-msg">日期范围已超过！</div>	
				</div>
			</div>
			
			<!--提交成功-->
			<div class="pop-up-windows2">
				<div class="window-tc">
					<div class="closeBtn2"><img src="img/window-btn.png" alt="关闭" /></div>
					<div class="tc-msg">提交成功！</div>
					<a href="rankingList.html"><div id="checkBtn">查看我的排名</div></a>
				</div>
			</div>
			<div class="title">填写囍宴主人信息</div>
			<div id="inputmsg">
			<div class="Input"><label for="name">真实姓名</label><input type="text" id="name"/></div>
			<div class="Input"><label for="tel">联系电话</label><input type="tel"  id="tel" /></div>
			<div class="Input"><label for="address">囍宴举办地点</label><input type="text"  id="address" /></div>
			<div class="Input"><label for="date">囍宴举办日期</label><input type="date"  id="date"  /></div>
			</div>
			<div class="zhuyimsg">
				只有于2016年1月1日后进行婚姻登记<br/>
				并在2016年10月1日--10月7日举办婚宴的新人<br/>
				(限广东省，海南省区域)才能入榜噢!
			</div>
		
			<div id="submitBtn"><img src="img/submitBtn.png"/></div>
			<a href="index.html" id="backBtn"><img src="img/backBtn.png"/></a>	
		</div>
		
		
		<script type="text/javascript" src="js/640commen.js"></script>
		<script type="text/javascript">
			var losetc = document.querySelector('.pop-up-windows1');
			var successtc = document.querySelector('.pop-up-windows2');
			var phonetc = document.querySelector('.pop-up-windows3');
			var provincetc = document.querySelector('.pop-up-windows4');
			var datetc = document.querySelector('.pop-up-windows5');
			var nametc = document.querySelector('.pop-up-windows6');
			
			var submitBtn = document.getElementById('submitBtn');
			var closeBtn1 = document.querySelector('.closeBtn1');
			var closeBtn2 = document.querySelector('.closeBtn2');
			var closeBtn3 = document.querySelector('.closeBtn3');
			var closeBtn4 = document.querySelector('.closeBtn4');
			var closeBtn5 = document.querySelector('.closeBtn5');
			var closeBtn6 = document.querySelector('.closeBtn6');
			function tc(){
				var name = document.getElementById('name');
				var phone = document.getElementById('tel');
				var address = document.getElementById('address');
				var startDate = document.getElementById('date');
			submitBtn.onclick = function(){
				var reg = /^(13\d{9})|(15[^4]\d{8})|(17[0|6-8]\d{8})|(18[0-8]\d{8})$/;
				var guangreg = /\u5e7f\u4e1c\u7701/;
				var haireg = /\u6d77\u5357\u7701/;
				var datereg = /^(2017\-10\-0[1-7])$/;
				var namereg  = /[\u4e00-\u9fa5]{2,3}/;
//				console.log(startDate.value);
				if(name.value == "" || phone.value == "" || address.value == "" || startDate.value == ""){
					losetc.style.display = "block";
				}else if(namereg.test(name.value)==false){
					nametc.style.display = "block";
				}else if(isNaN(phone.value) || reg.test(phone.value)==false){
					phonetc.style.display = "block";//手机号码格式不对
				}else if(guangreg.test(address.value)==false && haireg.test(address.value)==false){
					provincetc.style.display = "block";//省份不对
				}else if(datereg.test(startDate.value)==false){
					datetc.style.display = "block";//日期不对
				}else{
					var storage = window.localStorage;//把name储存在localstorage
					storage.setItem("name",name.value);
					successtc.style.display = "block";
				}
			}
				closeBtn1.addEventListener('click',function(){
					losetc.style.display = "none";
				});
				closeBtn2.addEventListener('click',function(){
					successtc.style.display = "none";
				});
				closeBtn3.addEventListener('click',function(){
					phonetc.style.display = "none";
				});
				closeBtn4.addEventListener('click',function(){
					provincetc.style.display = "none";
				});
				closeBtn5.addEventListener('click',function(){
					datetc.style.display = "none";
				});
				closeBtn6.addEventListener('click',function(){
					nametc.style.display = "none";
				});
			}
			tc();
		</script>
	</body>
</html>
